<template>
  <div class="containBox">
    <div class="app-main-left">
      <p>
        已完成探测 <span>{{ data.finished }}</span
        >条
      </p>
    </div>
    <div class="app-main-right" @click="arcClick">
      <p>
        全国断层 <span>{{ data.sum }}</span
        >条
      </p>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const emit = defineEmits(['showMap']);
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: {},
  },
});
const { data } = toRefs(props);
const arcClick = () => {
  emit('showMap');
};
</script>
<style lang="scss" scoped>
.containBox {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 30px 0;
  justify-content: space-evenly;
  .app-main-left,
  .app-main-right {
    cursor: pointer;
    width: 222px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(65, 141, 253, 0) 0%, #418dfd 100%);
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    p {
      height: 18px;
      font-size: 18px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 23px;
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
      span {
        width: 52px;
        height: 35px;
        font-size: 36px;
        font-family: DS-Digital-Normal, DS-Digital;
        font-weight: 400;
        color: #46ffff;
        line-height: 0px;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
        padding: 0 10px;
      }
    }
  }
}

#ActiveFaultsNumber {
  width: 80px;
  height: 80px;
}
</style>
